<template>
  <div class="box">
    <div class="box1">
      <h2 class="shezhi">设置</h2>
      <router-link to="/personal">
        <i class="jiantou iconfont icon-jiantou2"></i>
      </router-link>
    </div>
    <!-- 头像上传 -->
    <!-- 可修改文案和加载图标的颜色 -->
    <div class="box2">
      <van-uploader :after-read="afterRead">
        <div class="touxiang1">
          <h5 class="touxiang">头像</h5>
          <img v-if="userInfo.length === 0 ? false : true"
               class="tupian1"
               :src="userInfo.faceImage? (userInfo.faceImage.split('/')[0] === 'M00'? 'http://123.56.23.31:88/st/' + userInfo.faceImage :userInfo.faceImage) : ''"
               alt="" />
          <i class="jiantou1 iconfont icon-arrow-right-copy-copy-copy"></i>
        </div>
      </van-uploader>
      <div class="nicheng"
           @click="setNickName">
        <h5 class="nicheng1">昵称</h5>
        <div class="nicheng2"
             style="position: absolute;left: 70%;">
          {{ userInfo.length === 0 ? "未登录" : userInfo.nickname }}
        </div>
        <i class="jiantou1 iconfont icon-arrow-right-copy-copy-copy"></i>
      </div>
      <div class="nicheng">
        <h5 class="nicheng1">手机号</h5>
        <div class="nicheng3">{{userInfo.phone}}</div>
        <i class="jiantou1 iconfont icon-arrow-right-copy-copy-copy"></i>
      </div>
      <div class="nicheng">
        <h5 class="nicheng1">微信</h5>
        <div class="nicheng2"
             style="position: absolute;left: 70%;">去绑定</div>
        <i class="jiantou1 iconfont icon-arrow-right-copy-copy-copy"></i>
      </div>
      <div class="nicheng"
           style="top: 20px"
           @click="setPassWord">
        <h5 class="nicheng1">修改密码</h5>
        <div class="nicheng2"></div>
        <i class="jiantou1 iconfont icon-arrow-right-copy-copy-copy"></i>
      </div>
      <div class="nicheng"
           style="top: 20px">
        <h5 class="nicheng1">修改邮箱</h5>
        <div class="nicheng2"></div>
        <i class="jiantou1 iconfont icon-arrow-right-copy-copy-copy"></i>
      </div>
      <div class="tuichu">
        <button class="tuichu1"
                @click="signOut">退出登录</button>
      </div>
    </div>
    <van-dialog @confirm="confirmNickname"
                theme="round-button"
                v-model="showSendNickName"
                title="修改昵称"
                show-cancel-button>
      <van-cell-group>
        <van-field required
                   left-icon="manager-o"
                   v-model="newNickName"
                   label="新的用户名："
                   placeholder="请输入新的用户名" />
      </van-cell-group>
    </van-dialog>
    <van-dialog @confirm="confirmPassWord"
                theme="round-button"
                v-model="showSendPassWord"
                title="修改密码"
                show-cancel-button>
      <van-cell-group>
        <van-field required
                   left-icon="manager-o"
                   v-model="oldPassword"
                   label="原密码："
                   placeholder="请输入原密码" />
      </van-cell-group>
      <van-cell-group>
        <van-field required
                   left-icon="manager-o"
                   v-model="newPassword"
                   label="新密码："
                   placeholder="请输入新密码" />
      </van-cell-group>
    </van-dialog>
  </div>
</template>

<script>
import { uploadFaceBase64, setNickname, updatePassword } from "../../api/getData.js";
export default {
  computed: {

  },
  data () {
    return {
      userInfo: {},
      userId: '',
      showSendNickName: false,
      newNickName: "",
      showSendPassWord: false,
      oldPassword: "",
      newPassword: ""
    }
  },
  methods: {
    // 修改密码：
    setPassWord () {
      this.oldPassword = ""
      this.newPassword = ""
      this.showSendPassWord = true
    },
    confirmPassWord () {
      // let formData = new FormData()
      // formData.append("id",this.userId)
      // formData.append("oldPassword",this.oldPassword)
      // formData.append("newPassword",this.newPassword)
      // updatePassword(this.userId,this.oldPassword,this.showSendPassWord).then(res => {
      // })
      updatePassword(this.userId, this.oldPassword, this.newPassword).then(res => {
        if (res.data.status === 200) {
          this.$message.success(res.data.msg);
        } else {
          this.$message.fail(res.data.msg);
        }
      })

      console.log(this.oldPassword, this.newPassword);
    },
    // 修改昵称
    setNickName () {
      this.newNickName = ""
      this.showSendNickName = true
    },
    confirmNickname () {
      if (this.newNickName.trim() === '') {
        this.$message.fail('输入不能为空');
      } else {
        setNickname(this.userId, this.newNickName).then((res) => {
          let userInfo = JSON.parse(window.localStorage.getItem('userData'))
          userInfo.nickname = res.data.data
          window.localStorage.setItem('userData', JSON.stringify(userInfo))
          this.$router.go(0)
          this.$message.success('修改成功');
        })
      }
    },
    // 退出登录
    async signOut () {
      // 清除token
      window.localStorage.clear()
      this.$message.success('退出成功');
      // 刷新页面
      this.$router.push('/login')
    },
    // 头像上传
    // async uploadImg(){
    // },
    async afterRead (file) {
      this.$message.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      const { userId } = this
      // 此时可以自行将文件上传至服务器
      let result = await uploadFaceBase64(userId, file.content);
      if (result.data.status === 200) {
        let userInfo = JSON.parse(window.localStorage.getItem('userData'))
        userInfo.faceImage = result.data.data
        window.localStorage.setItem('userData', JSON.stringify(userInfo))
        this.$message.success('修改成功');
        this.$message.clear()
        this.$router.go(0)
      } else {
        this.$message.clear()
        this.$message.fail('修改失败');
      }
      // console.log(file.content);
    },
  },
  mounted () {
  },
  created () {
    this.userInfo = JSON.parse(window.localStorage.getItem('userData'))
    this.userId = this.userInfo.id
    // console.log(this.userInfo);
  }
};

</script>

<style lang="scss" scoped>
.box {
  // width: 100%;
  // height: 800px;
  background: rgb(241, 238, 241);
  height: 500px;
}
.box1 {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-image: linear-gradient(to right, #92fe9d 0%, #00c9ff 100%);
  position: relative;
}
.shezhi {
  left: 45%;
  font-weight: bold;
  position: absolute;
}
.jiantou {
  font-size: 22px;
  color: black;
  margin-left: 4px;
}
.box2 {
  width: 100%;
  height: 220px;
  background: rgb(251, 251, 251);
  margin-top: 18px;
  position: relative;
}
.van-uploader {
  width: 100% !important;
}
/deep/.van-uploader__input-wrapper {
  width: 100% !important;
}
.touxiang1 {
  width: 100%;
  height: 70px;
  // background: rgb(169, 166, 166);
  line-height: 70px;
  border-bottom: 1px solid rgb(220, 215, 215);
}
.touxiang {
  font-weight: bold;
  left: 12px;
  font-size: 15px;
  position: absolute;
}
.tupian1 {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  margin-left: 70%;
  margin-top: 9px;
  position: absolute;
}
.jiantou1 {
  display: block;
  margin-left: 90%;
  font-size: 22px;
}
.nicheng {
  width: 100%;
  height: 50px;
  background: rgb(255, 255, 255);
  line-height: 50px;
  position: relative;
  border-bottom: 1px solid rgb(220, 215, 215);
}
.nicheng1 {
  position: absolute;
  font-size: 15px;
  font-weight: bold;
  left: 12px;
}
.nicheng2 {
  position: absolute;
  left: 65%;
  font-size: 13px;
  color: rgb(181, 175, 175);
}
.nicheng3 {
  position: absolute;
  left: 65%;
  font-size: 13px;
  color: rgb(181, 175, 175);
}
.tuichu {
  width: 100%;
  height: 50px;
  background: rgb(255, 255, 255);
  line-height: 50px;
  margin-top: 70px;
}
.tuichu1 {
  text-align: center;
  color: red;
  font-weight: bold;
  border-bottom: 1px solid rgb(255, 255, 255);
  // margin-left: 125px;
  width: 100%;
  border: 1px solid rgb(255, 255, 255);
  background: rgb(255, 255, 255);
  border-bottom: 1px solid rgb(220, 215, 215);
}
</style>